<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<u-navbar title="视频" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
			<view class="flex-col self-stretch section_2" >
				<!-- <image
	        class="self-stretch image_5"
	        src="https://terminator.axu9.com/images/edit/video-poster.png"
	      /> -->
				<video :style="{height: videoHeight +'px'}" id="myVideo" :controls="false" @play="playVideo" @pause="pauseVideo" @ended="endedVideo"
					@timeupdate="timeupdateVideo" @loadedmetadata="onVideoLoaded" :show-center-play-btn="false" class="self-end image_6"
					:src="videoUrl"></video>
					 <!-- <video
					      id="myVideo"
					      :src="videoUrl"
					      :controls="true"
					      :duration="videoDuration"
					      @timeupdate="onTimeUpdate"
					      ref="videoRef"
					      style="width: 100%; height: 300px;"
					    ></video> -->
				<!-- <image
	        class="self-end image_6"
	        src="https://terminator.axu9.com/images/edit/play-icon.png"
	      /> -->
				<view class="flex-col justify-center items-start self-stretch group_4">
					<view class="flex-row justify-center" style="width: 100%;margin-bottom: 23rpx;">
						<image v-if="isPaused" @click="toPlayVideo" class="image_7"
							src="https://terminator.axu9.com/images/edit/pause-icon.png" />
						<image v-else @click="toPauseVideo" class="image_7"
							src="https://terminator.axu9.com/images/edit/play-icon.png" />
					</view>
					
						<!-- <view class="flex-row">
							<text class="font">{{currentTime}}</text>
							<view class="shrink-0 section_3 ml-8-5"></view>
							<text class="font ml-8-5">{{duration}}</text>
						</view> -->
				</view>
			</view>
			<!-- <view class="flex-row items-center self-stretch group view">
				<text class="shrink-0 font_2">00:00</text>
				<image class="shrink-0 image_8 image_9" src="https://terminator.axu9.com/images/edit/dot-icon.png" />
				<text class="shrink-0 font_2 text_2">00:02</text>
				<view class="flex-row justify-between items-center shrink-0 group_5">
					<image class="image_8" src="https://terminator.axu9.com/images/edit/dot-icon.png" />
					<text class="font_2">00:04</text>
					<image class="image_8" src="https://terminator.axu9.com/images/edit/dot-icon.png" />
				</view>
				<text class="shrink-0 font_2 text_3">00:06</text>
			</view> -->
			<view class="flex-col self-end group_6">
				<!-- <view class="flex-col self-stretch group_7">
	        <view class="flex-col justify-start items-start self-stretch relative group_8">
	          <view class="flex-col justify-start items-start image-wrapper">
	           <image
	              class="image_10"
	              src="https://terminator.axu9.com/images/edit/insert-icon.png"
	            />
	          </view>
			  <u-slider v-model="value" style="width: 100%;"></u-slider>
			 
	          <view class="section_4 pos_2"></view>
	        </view>
	       <view class="flex-col justify-start items-center self-start relative text-wrapper">
	          <text class="font text_4">门店环境</text>
	        </view>
	      </view> -->
				<view class="" style="position: relative;">
					<!-- 滚动容器 -->
					<!-- <scroll-view @scroll="handelScroll" scroll-x style="width: 100%;" :scroll-left="scrollLeft" class="scroll-container">
						<view class="scroll-content" style="padding-right: 375rpx;padding-left: 375rpx;">
							<image
							 v-for="(item, index) in list"
							  class="self-stretch image_5"
							  src="https://terminator.axu9.com/images/edit/video-poster.png"
							/>
							
						</view>
						
					</scroll-view> -->
					<!-- <view class="" style="color: red;">
						{{value}}
					</view> -->
					<view class="flex-row justify-between items-center" style="padding: 0 40rpx;width: 100%;margin-bottom: 28rpx;">
						<text class="font-time">{{currentTime}}</text>
						<text class="font-time ml-8-5">{{duration}}</text>
					</view>
					 <!-- :use-slot="true" -->
					<!-- <u-slider v-model="value" :step="stepSlider" :max="100" @moving="sliderMoving"> -->
								<!-- 这里外面需要多一层view，否则".badge-button"样式可能不生效 -->
								<!-- <view class="">
									<view class="section_4 "></view>
								</view> -->
							<!-- </u-slider> -->
							<!-- <slider
							      :value="currentTimeSecond"
							      min="0"
							      :max="videoDuration"
							      @change="onSliderChange"
							      style="width: 100%; margin-top: 20px;"
							    ></slider> -->
								<view class="" style="padding: 0 40rpx;margin-bottom: 38rpx;">
									<!-- <dc-slider :value="value" @changing="changing" @changed="changed" :max="max" :min="min" :step="1" :lineSize="12" :blockSize="50" blockColor="#fff"
				blockOuterColor="rgba(93, 93, 94,.4)" :disabled="false" :activeColor="activeColor"></dc-slider> -->
				<!-- <view class=""  style='width:0px;height:0px;overflow:hidden;'>
					   <canvas
					     canvas-id="myCanvas" 
					     :style="{width: canvasWidth+'px', height: canvasHeight + 'px'}"
					   ></canvas>
				</view> -->
				<dc-slider ref="slidernew" :value="value" @changing="changing" @changed="changed" :max="max" :min="min" :step="1" :lineSize="12" :blockSize="50" blockColor="#fff"
				blockOuterColor="rgba(93, 93, 94,.4)" :showImgTemp="showImgTemp" :disabled="false" :activeColor="activeColor"></dc-slider>
								</view>
								<!-- <slider class="custom-slider"  :value="value" @change="onSliderChange" activeColor="#00e587" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" /> -->
					<!-- <view class="section_4 " style="position: absolute;top: 50%;transform: translateY(-50%);" :style="{'left': item.pos+ '%','height': (160+index*60)+'rpx;'}" v-for="(item,index) in posList">
						<view class="" style="width: 60rpx;height: 60rpx;border-radius: 50%;position: absolute;bottom: -36rpx;left: 50%;transform: translateX(-50%);background-color: red;">
							{{index+1}}
						</view>
					</view> -->
				</view>
				<view @click="addNodes" class="flex-row justify-evenly items-center self-end section_5">
					<image class="image_11" src="https://terminator.axu9.com/images/edit/add-node.png" />
					<text class="font_3 text_5">新增节点</text>
				</view>
			</view>
			<view class="insert-list flex-row" v-if="posList.length > 0">
				<view class="flex-col justify-start insert-item" v-for="(item,index) in posList">
					<view class="">
						{{item.categoryName}}
					</view>
					<view class="">
						{{item.second}}
					</view>
				</view>
			</view>
		</view>


		<view class="flex-row group_9 justify-between">
			<view class="flex-row justify-start items-center flex-1 text-wrapper_2">
				<!-- <text class="font_3 text_7">请输入生成视频条数</text> -->
				<input v-model="videoCreateNum" class="font_3 text_7" type="text" placeholder="请输入生成视频条数"/>
			</view>
			<view class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-17">
				<text class="text_6">立即生成</text>
			</view>
		</view>
		
		<PickerGreen :show="cateListShow" :list="cateSelectList" :title="title" :min="1" :max="0" :cancelColor="cancelColor"
			:confirmColor="confirmColor" :cancelText="cancelText" :confirmText="confirmText" @cancel="cancel"
			@confirm="confirm"></PickerGreen>
	</view>
</template>

<script>
	import PickerGreen from '../../components/pickerGreen/index.vue';
	// import dcSlider from '@/components/ly-drag-slider/dc-slider.vue';
	import dcSlider from '@/components/ly-drag-slider-new/dc-slider.vue';
	import {
		getElementHeightByClassName,
		getNodeHeightByClassName
	} from "@/utils/index.js"
	import {
		getCateList,
		getVideoList,
		getVideoImg
	} from "@/api/edit.js"
	export default {
		components: {
			PickerGreen,
			dcSlider
		},
		data() {
			return {
				max: 100,
				min: 0,
				activeColor: '#00E3AB',
				progressVal: 60,
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				videoUrl: 'https://audiovideo.axa2.com/lv_tvMzQe3HiVx0G0Lha54KVsPCO',
				// videoUrl: 'https://audiovideo.axa2.com/FpFFHJA3WCaQMYCu-xedGBRIjt5t',
				videoId: '123224',
				videoContext: null,
				isPaused: true, //true暂停 false播放

				scrollLeft: 0, // 当前滚动位置
				contentWidth: 0, // 内容总宽度
				containerWidth: 0, // 容器宽度
				// list: Array.from({
				// 	length: 20
				// }, (_, i) => `Item ${i + 1}`), // 示例数据
				duration: 0,//总时长
				// currentTime: 0,//当前播放秒数
				// step: uni.upx2px(96),
				list: [],
				value: 0,
				maxSlider: 0,
				stepSlider: 0,
				currentTimeSecond: 0,
				
				videoDuration: 0, // 视频总时长
				currentTime: 0,   // 当前播放时间
				posList: [],
				cateListShow: false,
				cateSelectList: [],
				title: '选择分类',
				selectCateValue: '',
				selectCateId: '',
				cancelText: '取消',
				confirmText: '确定',
				confirmColor: '#fff',
				cancelColor: '#999999',
				videoCreateNum: '',//合成条数
				videoHeight: 0,
				imgList: [
				      "https://terminator.axu9.com/frames/frame0001123224.png",
				      "https://terminator.axu9.com/frames/frame0002123224.png",
				      "https://terminator.axu9.com/frames/frame0003123224.png",
				      'https://terminator.axu9.com/images/edit/video-poster.png',
				      'https://terminator.axu9.com/images/edit/video-poster.png'
				    ],
				    canvasWidth: 0,
				    canvasHeight: 0,
						  showImgTemp: ''
			}
		},
		// watch: {
		// 	value(newVal,oldVal){
		// 		console.log(newVal,oldVal,'value')
		// 		console.log(newVal/this.stepSlider,'aaaa')
		// 		// this.videoContext.seek(newVal/this.stepSlider)
		// 		// this.videoContext.currentTime = newVal/this.stepSlider
		// 	}
		// },
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
			// this.$refs.slidernew.loadImages()
			

			
		},
		async onLoad() {
			var videoImg = await getVideoImg({
				video: this.videoUrl,
				id: this.videoId,
				frameRate: 1
			})
			console.log(videoImg,'videoImg')
			if(videoImg.errno == 0){
				this.showImgTemp = videoImg.data;
				this.getVideoHeight();
				// console.log(this.imgList,'this.imgList')
				// setTimeout(()=>{
				// 	this.loadImages();
				// },2000)
				
			}
			// uni.compressImage({
			//   src: 'https://terminator.axu9.com/frames/frame0001123224.png',
			//   quality: 80,
			//   success: res => {
			//     console.log(res.tempFilePath,'res.tempFilePath')
			// 	this.saveImage(res.tempFilePath)
				
			//   },
			//   fail(err) {
			//   	console.log(err,'rrrrrrrrr')
			//   }
			// })
			// this.loadImages();
			
		},
		  // onReady() {
		  //   const videoContext = uni.createVideoContext('myVideo');
		  //   videoContext.duration({
		  //     success: (res) => {
		  //       this.videoDuration = res.duration;
		  //     },
		  //     fail: (err) => {
		  //       console.error('获取视频时长失败', err);
		  //     }
		  //   });
		  // },
		mounted() {
			// this.initScroll();
			this.getCateList();
			
		},
		beforeDestroy() {
			clearInterval(this.intervalId); // 清除定时器
		},
		methods: {
			// 保存图片
			saveImage(tempFilePath) {
			  wx.saveImageToPhotosAlbum({
			    filePath: tempFilePath,
			    success: () => {
			      wx.showToast({
			        title: '保存成功',
			        icon: 'success'
			      });
			    },
			    fail: err => {
			      console.error('保存失败:', err);
			      if (err.errMsg.includes('auth deny')) {
			        wx.showModal({
			          title: '提示',
			          content: '需要相册权限才能保存图片',
			          showCancel: false
			        });
			      }
			    }
			  });
			},
			// 加载所有图片
			  async loadImages() {
				  
			    const imgList = this.imgList;
				// var videoImg = await getVideoImg({
				// 	video: this.videoUrl,
				// 	id: this.videoId,
				// 	frameRate: 1
				// })
				// const imgList = videoImg.data;
			    const imgInfoList = [];
			 
			    // 并行加载图片信息
				console.log(imgList,'imgList')
			    const promises = imgList.map(img => 
			      new Promise((resolve, reject) => {
			        wx.getImageInfo({
			          src: img,
			          success: res => resolve(res),
			          fail: reject
			        });
			      })
			    );
				console.log(promises,'promises')
			    try {
			      const results = await Promise.all(promises);
			      imgInfoList.push(...results);
			      console.log(imgInfoList,'imgInfoList')
			      // 计算画布尺寸
			      const height = imgInfoList[0].height;
			      let width = 0;
			      imgInfoList.forEach(info => width += info.width);
						// this.canvasWidth = width;
						// this.canvasHeight = height;
						const systemInfo = wx.getSystemInfoSync();
						console.log(systemInfo.screenWidth, 'systemInfo')
						this.canvasWidth = systemInfo.screenWidth - uni.upx2px(80);
						this.canvasHeight = 48;
						// this.$refs.slidernew.drawCanvas(imgInfoList)
						this.drawCanvas(imgInfoList);
			      // this.setData({
			      //   canvasWidth: width,
			      //   canvasHeight: height
			      // }, () => {
			      //   this.drawCanvas(imgInfoList);
			      // });
			    } catch (error) {
			      console.log('图片加载失败:', error);
			    }
			  },
			 
			  // 绘制画布
			  drawCanvas(imgInfoList) {
			    const ctx = wx.createCanvasContext('myCanvas');
			    let x = 0;
			 
			    // imgInfoList.forEach((imgInfo, index) => {
			    //   ctx.drawImage(
			    //     imgInfo.path,
			    //     x, 0,
			    //     imgInfo.width,
			    //     imgInfo.height
			    //   );
			    //   x += imgInfo.width;
			    // });
			  ctx.drawImage(imgInfoList[0].path,0,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[1].path,this.canvasWidth/11,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[2].path,this.canvasWidth/11 *2,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[3].path,this.canvasWidth/11 *3,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[4].path,this.canvasWidth/11 *4,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[5].path,this.canvasWidth/11 *5,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[6].path,this.canvasWidth/11 *6,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[7].path,this.canvasWidth/11 *7,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[8].path,this.canvasWidth/11 *8,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[9].path,this.canvasWidth/11 *9,0,this.canvasWidth/11,48)
					ctx.drawImage(imgInfoList[10].path,this.canvasWidth/11 *10,0,this.canvasWidth/11,48)
					// ctx.drawImage(imgInfoList[3].path,450,0,150,96)
					// ctx.drawImage(imgInfoList[4].path,600,0,150,96)
			    ctx.draw(false, () => {
			      wx.canvasToTempFilePath({
			        canvasId: 'myCanvas',
			        success: res => {
			          // this.saveImage(res.tempFilePath);
							this.showImgTemp = res.tempFilePath
							this.getVideoHeight();
							console.log(this.showImgTemp,'showImgTemp')
			        },
			        fail: err => console.error(err)
			      });
			    });
			  },
			async getVideoHeight(){
				const systemInfo = wx.getSystemInfoSync();
				console.log(systemInfo, 'systemInfo')
				var screenHeight = systemInfo.screenHeight;
				var statusBarHeight = systemInfo.statusBarHeight;
				console.log(screenHeight, statusBarHeight)
				var maskCustonHeight = (screenHeight - statusBarHeight - 48)
				var group6Height = await getNodeHeightByClassName('group_6');
				var section5Height = await getNodeHeightByClassName('section_5');
				var fontTimeHeight = await getNodeHeightByClassName('font-time');
				console.log(48+uni.upx2px(73)+section5Height+fontTimeHeight,'group6Height',uni.upx2px(27))
				console.log(48,uni.upx2px(46),section5Height,fontTimeHeight)
				var aaa = 48+uni.upx2px(93)+section5Height+fontTimeHeight
				// console.log(uni.upx2px(555),'insertlistHeight')
				// this.videoHeight = screenHeight - group6Height- uni.upx2px(27) - uni.upx2px(555) - statusBarHeight -  48
				this.videoHeight = screenHeight - aaa - uni.upx2px(555) - statusBarHeight -  48
			},
			changing(e) {
				console.log('----changing----');
				console.log(e);
			},
			changed(e) {
				console.log('----changend----');
				console.log(e);
				console.log(e.value,'event')
				this.videoContext.seek(e.value/this.stepSlider)
			},
			async getCateList(){
				var result = await getCateList({uid: uni.getStorageSync("userId")})
				if(result.errno == 0){
					this.cateList = result.data
					if(this.cateList.length > 0){
							this.cate_id = this.cateList[0].id
							this.cateSelectList = this.cateList.map(item => {
								return {
									label: item.name,
									id: item.id
								}
							})
							
							// this.getVideoList()
						}
				}
				
			},
			cancel(){
				this.cateListShow = false;
			},
			confirm(data){
				this.cateListShow = false;
				this.selectCateValue = this.cateSelectList[data].label
				this.selectCateId = this.cateSelectList[data].id
				this.getVideoList(this.selectCateId)
			},
			// 获取视频列表
			getVideoList(){
				getVideoList({
					cate_id: this.cate_id,
					page: this.page,
					rows: this.rows
				}).then(res => {
					console.log(res)
					this.videoList = res.data.data;
					if (this.posList.some(item => item.second === this.currentTime)) {
					  uni.showToast({
					  	title: '相同时间不能插入不同视频',
					  	icon: 'none'
					  })
					} else {
					  this.posList.push({
					  		second: this.currentTime,
					  		categoryName: this.selectCateValue
					  	})
					}
					
					
				})
			},
			addNodes(){
				// console.log(this.currentTimeSecond,'aaaa')
				// setTimeout(()=>{
				// 	this.posList.push({
				// 		second: this.currentTimeSecond,
				// 		pos: this.value
				// 	})
				// },1000)
				this.cateListShow = true;
				this.videoContext.pause()
			},
			handelScroll(e){
				console.log(e.detail.scrollLeft,'handelScroll')
				this.scrollLeft = Math.floor(e.detail.scrollLeft)
			},
			onVideoLoaded(e){
				console.log(e.detail.duration,'eeeeeeeeee')
				this.duration = this.formatTime(e.detail.duration)
				this.stepSlider =  100 / Math.floor(e.detail.duration)
				this.currentTime = this.formatTime(0)
				this.value = 0
				// for(var i=0;i<Math.floor(e.detail.duration);i++){
				// 	this.list.push({
				// 		hasInsert: false
				// 	})
				// }
				// console.log(this.list,'this.list')
			},
			formatTime(seconds) {
			  const totalSeconds = Math.floor(seconds);
			  let hours = Math.floor(totalSeconds / 3600);
			  let minutes = Math.floor((totalSeconds % 3600) / 60);
			  let secs = totalSeconds % 60;
			
			  // 根据总秒数智能选择显示格式
			  if (totalSeconds >= 3600) {
			    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			  }
			  return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			},
			// 初始化获取容器和内容尺寸
			async initScroll() {
				const query = uni.createSelectorQuery().in(this);

				// 获取容器宽度
				query.select('.scroll-container').boundingClientRect(rect => {
					this.containerWidth = rect.width;
				}).exec();

				// 获取内容宽度（需确保内容已渲染）
				await this.$nextTick();
				query.select('.scroll-content').boundingClientRect(rect => {
					this.contentWidth = rect.width;
				}).exec();
			},

			// 开始自动滚动
			startAutoScroll() {
				// const step = uni.upx2px(96); // 转换rpx为px
				this.intervalId = setInterval(() => {
					// if (this.scrollLeft + this.containerWidth >= this.contentWidth) {
					// 	clearInterval(this.intervalId);
					// 	// 循环滚动：this.scrollLeft = 0;
					// } else {
					// 	this.scrollLeft += 40;
					// }
					if (this.scrollLeft + this.containerWidth >= this.contentWidth) {
						clearInterval(this.intervalId);
						// 循环滚动：this.scrollLeft = 0;
					} else {
						this.scrollLeft += this.step;
					}
				}, 1000);
			},
			toPlayVideo() {
				this.videoContext.play()

			},
			toPauseVideo() {
				this.videoContext.pause()

			},
			endedVideo() {
				this.isPaused = true;
				clearInterval(this.intervalId);
			},
			playVideo() {
				this.isPaused = false;
				if(this.value == 100){
					this.value = 0;
				}
				// this.scrollLeft = 0;
				// this.startAutoScroll();
				
			},
			pauseVideo() {
				this.isPaused = true;
			},
			timeupdateVideo(e) {
				console.log(e.detail.currentTime,'timeupdateVideo')
				this.currentTime = this.formatTime(e.detail.currentTime)
				this.currentTimeSecond = Math.floor(e.detail.currentTime)
				this.value = Math.floor(e.detail.currentTime * this.stepSlider)
			},
			sliderMoving(){
				// console.log(this.value,'sliderMoving')
				console.log(this.value/this.stepSlider,'aaaa')
				this.videoContext.seek(this.value/this.stepSlider)
			},
			onTimeUpdate(event) {
			      this.currentTime = event.detail.currentTime;
			    },
			    onSliderChange(event) {
			      // const videoContext = uni.createVideoContext('myVideo');
			      // videoContext.seek(event.detail.value);
				  console.log(event.detail.value,'event')
				  this.videoContext.seek(event.detail.value/this.stepSlider)
			    }
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);
	.scroll-container {
		white-space: nowrap;
	}

	.scroll-content {
		display: inline-block;
		padding: 20rpx 0;
	}

	.scroll-content text {
		display: inline-block;
		margin-right: 40rpx;
		padding: 10rpx 20rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
	}

	.ml-82-5 {
		margin-left: 165rpx;
	}

	.ml-8-5 {
		margin-left: 17rpx;
	}

	.ml-17 {
		margin-left: 34rpx;
	}

	.page {
		padding: 34rpx 0 86rpx;
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		overflow-x: hidden;
	}

	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.group_2 {
		margin-top: 31rpx;
		padding: 0 20rpx;
	}

	.image_3 {
		width: 20rpx;
		height: 35rpx;
	}

	.group_3 {
		margin-right: 13rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section {
		padding: 14rpx 27rpx;
		background-color: #ffffff33;
		border-radius: 32rpx;
		height: 65rpx;
	}

	.image_2 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.section_2 {
		/* margin-top: 30rpx; */
		/* padding: 128rpx 0 28rpx; */
		background-color: #171718;
	}

	.image_5 {
		/* width: 100vw;
		height: 77.0667vw; */
		width: 96rpx;
		height: 96rpx;
	}

	.image_6 {
		/* margin-right: 308rpx; */
		/* margin-top: 17rpx; */
		width: 100%;
		/* height: 40vh; */
	}

	.group_4 {
		margin-top: 23rpx;
		margin-bottom: 23rpx;
		padding: 0 31rpx;
	}

	.pos {
		position: absolute;
		left: 31rpx;
		bottom: 3rpx;
	}

	.font {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
		color: #ffffff;
	}
	.font-time {
		font-size: 22rpx;
		color: #999999;
	}
	.section_3 {
		background-color: #464649;
		width: 1rpx;
		height: 20rpx;
	}

	.image_7 {
		width: 29rpx;
		height: 36rpx;
	}

	.view {
		margin-left: 43rpx;
		margin-top: 19rpx;
	}

	.font_2 {
		font-size: 16rpx;
		font-family: PingFang SC;
		line-height: 13rpx;
		color: #999999;
	}

	.image_8 {
		width: 6rpx;
		height: 6rpx;
	}

	.image_9 {
		margin-left: 87rpx;
	}

	.text_2 {
		margin-left: 87rpx;
	}

	.group_5 {
		margin-left: 87rpx;
		width: 217rpx;
	}

	.text_3 {
		margin-left: 96rpx;
	}

	.group_6 {
		margin-top: 27rpx;
		overflow-x: hidden;
		/* width: 688rpx; */
		width: 100%;
	}

	.group_7 {
		overflow-x: hidden;
		height: 190rpx;
	}

	.group_8 {
		padding: 22rpx 0 42rpx;
		overflow-x: hidden;
	}

	.image-wrapper {
		/* padding: 10rpx 0 16rpx; */
		height: 96rpx;
		border-radius: 8rpx;
		background-image: url('https://terminator.axu9.com/images/edit/video-imgs.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 706rpx;
	}

	.image_10 {
		margin-left: 205rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.section_4 {
		background-color: #f9fafe;
		box-shadow: 0rpx 0rpx 9.2rpx 0.8rpx #060e2e42;
		border-radius: 2.5rpx;
		width: 5rpx;
		/* height: 160rpx; */
	}

	.pos_2 {
		position: absolute;
		/* left: 0; */
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.text-wrapper {
		margin-left: 183rpx;
		margin-top: -12rpx;
		padding: 10rpx 0;
		background-color: #1d1d26;
		border-radius: 4rpx;
		width: 118rpx;
	}

	.text_4 {
		line-height: 22rpx;
	}

	.section_5 {
		margin-right: 33rpx;
		padding: 17rpx 21rpx 17rpx 29rpx;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 30rpx;
		width: 180rpx;
	}

	.image_11 {
		width: 26rpx;
		height: 26rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.text_5 {
		color: #ffffff;
		font-weight: 500;
	}

	.group_9 {
		padding-left: 43rpx;
		padding-right: 29rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 96rpx;
	}

	.text-wrapper_2 {
		/* padding: 28rpx 0; */
		background-color: #212123;
		border-radius: 8rpx;
		height: 80rpx;
	}

	.text_7 {
		margin-left: 30rpx;
		color: #dddddd;
	}

	.text-wrapper_3 {
		padding: 28rpx 0;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 8rpx;
		width: 228rpx;
		height: 80rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 27rpx;
	}
	.insert-list {
		padding: 40rpx;
		overflow-x: scroll;
	}
	.insert-item {
		min-width: 226rpx;
		height: 120rpx;
		border-radius: 16rpx;
		background: #1d1d26;
		color: #fff;
		margin-right: 12rpx;
		padding: 10rpx 16rpx;
	}
</style>